<template>
  <!--    -->
  <a-modal
    title="操作"
    :width="800"
    :confirmLoading="confirmLoading"
    :visible="visible"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >

    <div>
      <a-select
        mode="multiple"
        placeholder="请选择广告图片"
        :value="selectedItems"
        @change="handleChange"
        style="width: 100%;"
      >
        <a-select-option v-for="item in filteredOptions" :key="item.id" :value="item.id">
          <img class="setImg"  mode="aspectFit" :src="item.sourceUrl" alt="">
        </a-select-option>
      </a-select>
    </div>
  </a-modal>
</template>

<script>
  import {
    selectAdvertisementAll,
    selectAdvertisementChoose
  } from './../../../api/advertisementService/advertisementDistribution'
  import { updateStoreAdvertisement } from '@/api/storeService/store'

  export default {
    name: 'Edit',
    data() {
      return {
        selectedItems: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        sourceUrl: [],
        StoresId: ''//门店id
      }
    },
    computed: {
      filteredOptions() {
        if (this.sourceUrl!=undefined ||this.sourceUrl != null) {
          return this.sourceUrl.filter(o => !this.selectedItems.includes(o))
        }
      }
    },
    created() {
      selectAdvertisementAll().then((res) => {//查询广告列表
        console.log('222222',res)
        this.sourceUrl = res.result
      })

    },
    methods: {
      handleChange(selectedItems) {
        this.selectedItems = selectedItems
      },

      handleOk() {
        const _this = this
        let valuse = {
          advertisementIds: this.selectedItems,
          id: _this.mdl.id
        }
        updateStoreAdvertisement(valuse).then((res) => {
          if (res.code === 200) {
            _this.$message.success('保存成功')
            _this.$emit('ok')
            _this.close()
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        }).catch(() => {
        }).finally(() => {
          _this.confirmLoading = false
        })
      },
      edit(record) {
        this.url = ''
        this.isDisabled = true
        this.mdl = Object.assign({}, record)
        this.StoresId = record.id
        if(this.sourceUrl==null || this.sourceUrl==undefined){
          this.$notification.error({
            message: '错误',
            description:'超级管理员不能分配广告',
            duration: 4
          })
          return
        }
        this.visible = true
        const params = { 'storeId': record.id }
        if (record) {
          selectAdvertisementChoose(params).then(res => { //回现图片
            this.selectedItems = res.result
          })
        }

      },
      close() {
        this.$emit('close')
        this.visible = false
        // this.form.resetFields()
        this.mdl = {}
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>
  >>>.ant-select-selection__rendered{
    display: flex;
    align-items: center;
    text-align: center;
    height: 75px;
  }
  >>>.ant-select-selection__choice{
    height:50px !important;
    align-items: center;
  }

  .setImg {
    width: 95px;
    height:61px;
  }
</style>
